<template>
    <el-dialog :visible="visible" width="80%" append-to-body top="14vh" class="knowledge-dialog" :close-on-click-modal="false" :before-close="close" @close="onClose">
        <div>
            <el-form :model="queryParams" size="small" label-position="left" label-suffix=":" ref="searchForm" label-width="80px">
                <el-row :gutter="24">
                    <el-col :span="6">
                        <el-form-item :label="$t('inventoryManagement.inspectionBatchNo')" prop="inspectionLotMark">
                            <el-input v-model="queryParams.inspectionLotMark" clearable size="small" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-button type="primary" icon="el-icon-search" @click="getList" class="search-btn" size="mini">{{ $t("public.search") }}</el-button>
                        <el-button icon="el-icon-refresh" @click="reset" size="mini">{{ $t("public.reset") }}</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <div class="container-table">
                <el-table stripe v-loading="loading" :data="templateList">
                    <el-table-column v-for="(item,index) in columns" :key="index" :label="item.label" align="left" :prop="item.prop" show-overflow-tooltip />
                    <el-table-column :label="$t('inventoryManagement.inspectionOrderstatus')" align="center" prop="sheetStatus" width="140px" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <div :class="sheetColorChange(scope.row.sheetStatus)">
                                {{ formatOrderStatus(scope.row.sheetStatus) }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column :label="$t('public.opera')" align="center" width="100">
                        <template slot-scope="scope">
                            <a class="action-wrap" @click="choose(scope)" style="color:#5a9eaf">
                                {{$t('rule.select')}}
                            </a>
                        </template>
                    </el-table-column>

                </el-table>

                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" layout="total, sizes, prev, pager, next, jumper" />
            </div>
        </div>
        <div slot="footer">
            <el-button size="mini" type="default" icon="el-icon-close" @click="handleConfirm">{{ $t("btn.close") }}</el-button>
        </div>
    </el-dialog>
</template>

<script>
import {getDuplicateList,} from '@/api/inspectionManagement/inspectionManagement'

export default {
    name: 'copyInspect',
    props: ['viewModel', 'visible'],
    dicts: [
        'NYIQC_SHEET_STATUS', //检验单状态
    ],
    data() {
        return {
            total: 1,
            templateList: [{ templateName: 'xx模板' }],
            queryParams: {
                pageNum: 1,
                pageSize: 20,
                inspectionLotMark: '',
                materialCode: '',
                supplierCode: '',
                supplierName: '',
                materialName: '',
                lichn: '',
                ifInspect: '1',
            },
            loading: false,
            data: null,
            title: '',
            nodeType: this.$store.state.fmea.nodeType,
            columns: [
                {
                    label: this.$t('inventoryManagement.supplierBatchNo'),
                    prop: 'lichn',
                },
                {
                    label: this.$t('inspectionManagement.supplierName'),
                    prop: 'supplierName',
                },
                {
                    label: this.$t('inspectionManagement.materialName'),
                    prop: 'materialName',
                },
                {
                    label: this.$t('inventoryManagement.materialNo'),
                    prop: 'materialCode',
                },
                {
                    label: this.$t('inventoryManagement.batch'),
                    prop: 'lot',
                },
                {
                    label: this.$t('defectIncoming.btchNum'),
                    prop: 'batchAmount',
                },
                {
                    label: this.$t('inventoryManagement.supplierNo'),
                    prop: 'supplierCode',
                },
                {
                    label: this.$t('inspectionManagement.plantArea'),
                    prop: 'factoryName',
                },
            ],
        }
    },
    created() {
        this.queryParams.lichn = this.viewModel.lichn
        this.queryParams.supplierCode = this.viewModel.supplierCode
        this.queryParams.supplierName = this.viewModel.supplierName
        this.queryParams.materialCode = this.viewModel.materialCode
        this.queryParams.materialName = this.viewModel.materialName
        this.getList()
    },
    methods: {
        reset() {
            this.getList()
        },
        getList() {
            this.loading = true
            getDuplicateList(this.queryParams).then((response) => {
                if (response.code == 200 && response.rows) {
                    this.templateList = response.rows
                    this.total = response.total
                    this.loading = false
                }
            })
        },
        // 窗口打开
        onOpen() {
            this.getList()
        },
        // 窗口关闭
        onClose() {
            this.data = null
        },
        handleConfirm() {
            this.$emit('update:visible', false)
        },
        choose(scope) {
            console.log(scope.row)
            this.$emit('callback', scope.row.id)
            this.$emit('update:visible', false)
        },
        // 窗口关闭前执行
        close() {
            this.$emit('update:visible', false)
        },
        // 检验单状态变色
        sheetColorChange(status) {
            switch (status) {
                case '0':

                case '1':
                case '2':
                    return 'labelColor1'
                case '3':
                    return 'labelColor0'
                case '4':
                case '5':
                    return 'labelY'
            }
        },
        formatOrderStatus(e) {
            if (e) {
                let obj = this.dict.type.NYIQC_SHEET_STATUS.find((item) => {
                    return item.value === e
                })
                if (obj) {
                    return obj.label
                } else {
                    return ''
                }
            } else {
                return ''
            }
        },
    },
}
</script>

<style scoped>
::v-deep .el-dialog__footer {
    text-align: center;
}
.search-btn {
    background: #20b09f;
    border-color: #20b09f;
}
</style>
